<!-- 商品一项 -->
<template>
	<view style="height: 100%;">
		<block v-if="list.length">
			<view class="productItem">
				<view v-for="(item,index) in list" :key="item.id" class=" flex"
					style="background-color: #fff;margin-bottom: 20rpx;padding: 20rpx;">
					<view class="img">
						<u-image width="200rpx" height="200rpx" :src="item.goods_main_image"></u-image>
					</view>
					<view class="f1" style="margin-left: 10rpx;">
						<view class="description">{{item.goods_title}}</view>
						<view style="color: #666666;font-size: 24rpx;margin-top: 20rpx;">
							销量：{{item.sales_volume}}
							<text style="margin-left: 20rpx;">库存：</text>
							<text :style="{
								color: item.stock == 0 ? 'red' : ''
							}">{{item.stock}}</text></view>
						<view class="flex flex-jc-sb flex-ai-c" style="margin-top: 20rpx;">
							<view class="price">¥ {{item.sales_price}}</view>
							<view class="flex flex-ai-c">
								<view class="button1 btn" v-if="type" @click="offShelf(item)">{{item.status?'下架':'上架'}}
								</view>
								<view class="button2 btn" v-if="type" @click="edit(item)">编辑</view>
								<view class="button2 btn" v-if="!type" @click="choose(item)">选择</view>
							</view>
						</view>
					</view>
				</view>
				<slot name="more"></slot>
			</view>
		</block>
		<view class="flex flex-jc-c flex-ai-c" v-else style="height: 70vh;">
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import product from '@/api/product.js'
	export default {
		props: {
			type: { //是否商品管理
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			userType: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			async offShelf(item) {
				const {
					goods_title,
					status,
					channel_no,
					weight,
					goods_main_image,
					device_no,
					sales_price
				} = item
				const res = await product.editGoodsInfo({
					goods_title,
					status: item.status ? 0 : 1,
					channel_no,
					weight,
					goods_main_image,
					device_no,
					sales_price
				})
				if (res.data.code === 200) {
					item.status = item.status ? 0 : 1
				}
			},
			edit(val) {
				if(this.userType.length == 0){
					return uni.showToast({
						title: '请稍后再试',
						icon: 'none'
					})
				}else if(!this.userType.includes(5)){
					return uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
				}
				this.$store.commit('selectedList', val)
				uni.navigateTo({
					url: '/pages/product/productEdit'
				});
			},
			choose(val) {
				uni.navigateBack({
					delta: 1,
					success: () => {
						this.$store.commit('selectedList', val)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.description {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
	}

	.productItem {
		padding: 20rpx;

		.img {
			width: 200rpx;
			height: 200rpx;
		}

		.price {
			font-size: 26rpx;
			color: #F95533;
		}

		.btn {
			width: 138rpx;
			height: 58rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 58rpx;
			font-size: 26rpx;
			font-weight: 500;
		}

		.button1 {
			border: 1rpx solid #999999;
			color: #666666;
			margin-right: 40rpx;
		}

		.button2 {
			background: #FCB527;
			color: #FFFFFF;
		}
	}
</style>